<template>
  <div class="container">
    <div class="box">
      <div class="logo">
        <image src="http://static.catone-vip.com/20190228/5c778d3534feb"></image>
      </div>
      <van-button  class="mk-login-button" type="primary" size="large" open-type="getUserInfo" block @click="onWxLogin">微信登录</van-button>
      <van-button  class="mk-login-button" plain type="primary" size="large" open-type="getUserInfo" block @click="loginPhone">手机号登录</van-button>
      <van-button  class="mk-login-button" plain type="primary" size="large" open-type="getUserInfo" block @click="onPhoneRegister">手机号注册</van-button>
    </div>
    <div class="footer">
      <image src="http://static.myconplus.com/20190724/5d37c8266551a" >
      </image>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import * as AuthAction from '@/api/auth'

export default {
  data () {
    return {
      canIUse: wx.canIUse('button.open-type.getUserInfo')
    }
  },
  computed: {
    ...mapState(['me'])
  },
  onLoad () {
    if (!wx.getStorageSync('openid')) this.checkLogin()
  },
  methods: {
    checkLogin () {
      let that = this
      wx.login({
        success: res => {
          if (res.code) {
            AuthAction.mpLogin(res.code)
              .then(data => {
                if (data.me) {
                  that.$store.commit('set_me', data.me)
                  wx.setStorageSync('token', data.token)
                  wx.redirectTo({ url: '../user/index' })
                } else { wx.setStorageSync('openid', data.openid) }
              }).catch(err => console.log(err))
          } else { console.log(res) }
        },
        fail: console.error
      })
    },
    onPhoneRegister () {
      let that = this
      wx.getSetting({
        success (res) {
          if (res.authSetting['scope.userInfo']) {
            if (!that.$root.$mp.query.target) wx.navigateTo({ url: './phone-register' })
            else {
              wx.navigateTo({ url: './phone-register?target=' + that.$root.$mp.query.target + '&id=' + that.$root.$mp.query.id })
            }
          }
        },
        fail: console.error
      })
    },
    loginPhone () {
      let that = this
      wx.getSetting({
        success (res) {
          if (res.authSetting['scope.userInfo']) {
            if (!that.$root.$mp.query.target) {
              wx.navigateTo({ url: './login-phone' })
            } else {
              wx.navigateTo({ url: './login-phone?target=' + that.$root.$mp.query.target + '&id=' + that.$root.$mp.query.id })
            }
          }
        },
        fail: console.error
      })
    },
    onWxLogin () {
      let that = this
      wx.getSetting({
        success (res) {
          if (res.authSetting['scope.userInfo']) {
            if (!that.$root.$mp.query.target) wx.navigateTo({ url: '../auth/wx-bind-phone' })
            else {
              wx.navigateTo({ url: '../auth/wx-bind-phone?target=' + that.$root.$mp.query.target + '&id=' + that.$root.$mp.query.id })
            }
          }
        },
        fail: console.error
      })
    }
  }
}
</script>
<style lang="less" scoped>

.container {
  height: 667px;
  position: relative;
  .box {
    margin-top:150rpx;
    padding:20rpx 35rpx;
    .logo {
      width:140rpx;
      height:140rpx;
      margin:0 auto;
      padding-bottom:25px;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    padding:0 0 50rpx;
    image {
      height:40rpx;
      width:399rpx;
    }
  }
}
</style>


